<template>
	<view class="game">
		<!-- <view class="area-header">
			<view class="item">金币：{{player.resource.coin.toLocaleString('en-US')}}</view>
			<view class="item">元宝：0</view>
		</view> -->
		<view class="exp">
			<comp-progress :size="15" activeColor="#191b1f" :percent="player.resource.exp/$data_exp[player.lv+1] * 100"></comp-progress>
			<view class="text">{{player.resource.exp}} / {{$data_exp[player.lv+1]}}</view>
		</view>
		
		<view class="area-main">
			<panel-battle></panel-battle>
			<panel-role v-show="current == 'panel-role'"></panel-role>
			<panel-setup v-if="current == 'panel-setup'"></panel-setup>
		</view>
		
		
		
		<view class="area-footer">
			<view :class="['item',current == item.type || '' ? 'active' : '']" v-for="(item,index) in nav" :key="index" @click="change_tab(item)">{{item.name}}</view>
		</view>
		
	</view>
</template>

<script>

	import { mapState } from "vuex";
	import panelBattle from "@/components/panel-battle/panel-battle.vue"
	import panelMessage from "@/components/panel-message/panel-message.vue"
	import panelRole from "@/components/panel-role/panel-role.vue"
	import panelSetup from "@/components/panel-setup/panel-setup.vue"
	
	
	
	export default {
		components:{
			panelBattle,
			panelMessage,
			panelRole,
			panelSetup
		},
		computed : {
			...mapState(['player']),
		},
		data() {
			return {
				nav : [
					{name : '角色',type : 'panel-role'},
					{name : '战斗',type : ''},
					{name : '设置',type : 'panel-setup'}
				],
				current : ''
			};
		},
		mounted() {
			this.$store.commit('player/commit_init_player')
			
		},
		methods : {
			change_tab(item){
				this.current = item.type
			}
		}
	}
</script>

<style lang="scss">
	.game{
		max-width:750px;
		height:100vh;
		display: flex;
		flex-direction: column;
		margin:0 auto;
		overflow: hidden;
		
		@include respond-to('pc'){
			border-left: 1px solid #000;
			border-right: 1px solid #000;
		}
		
		.exp{
			overflow: hidden;
			
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			border-bottom: 1px solid #000;
			z-index: 10;
			.text{
				font-size:12px;
				transform:scale(0.8);
				color:#abb2bf;
				transform-origin:bottom center;
				position: absolute;
				bottom:1px
			}
		}
		
		
		position: relative;
		
		.area-header{
			height:30px;
			background-color: $game-color-2;
			border-bottom: 1px solid #000;
			position: relative;
			z-index: 10;
			display: flex;
			.item{
				flex: 1;
				border-right: 1px solid #000;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&:last-child {
					border-right: none;
				}
			}
		}

		.area-main{
			flex:1;
			display: flex;
			flex-direction: column;
			position: relative;
		}
		.area-footer{
			height:60px;
			background-color: $game-color-2;
			border-top: 1px solid #000;
			display: grid;
			grid-template-columns: repeat(auto-fit,minmax(40px,1fr));
			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				&.active{
					color:var(--color-green)
				}
			}
		}
	}
</style>
